<%--
  User: wang_
  Date: 2025/7/14
  Time: 13:32
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<% response.setHeader("Content-Type", "text/html; charset=UTF-8"); %>
<% request.setCharacterEncoding("UTF-8"); %>
<% response.setCharacterEncoding("UTF-8"); %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--java代码获取系统上下文路径-->
<%String path=request.getContextPath();%>
<%--JSTL获取系统上下文路径：--%>
<c:set var="ctu" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>返回顶部按钮</title>
	<link rel="stylesheet" href="${ctu}/css/returnToTopButton.css">
</head>
<body>
<div id="returnToTopButton">
	<img src="${ctu}/img/arrow.svg" alt="箭头">
</div>
<script>
    $(function () {
        // 触发高度
        const SHOW_BUTTON_SCROLL_THRESHOLD = 0;
        // 返回按钮
        const button = $("#returnToTopButton");

        // 鼠标悬停动画
        button.on('mouseenter', function () {
            $(this).stop().animate({
                backgroundColor: '#2c3b52',
                scale: '(1.1)',
                opacity: 1,
            }, 150);
        }).on('mouseleave', function () {
            mouseleave(this);
        });

        // 页面滚动监听
        $(window).on('scroll', function () {
            const h = $("html, body").scrollTop();
            const appear = h > SHOW_BUTTON_SCROLL_THRESHOLD;
            const disappear = h == SHOW_BUTTON_SCROLL_THRESHOLD;
            button.stop();
            button.toggleClass("returnToTopButton-appear", appear)
                .toggleClass("returnToTopButton-disappear", disappear)
	        // 出现
            if (appear){
                button.stop().animate(
                    {
                        opacity: 0.5,
                    }
                );
            }
            // 消失
	        if (disappear) {
                mouseleave(button);
                button.stop().animate(
                    {
	                    opacity: 0,
                    }
                );
            }
        });

        // 点击返回顶部
        button.on('click', function () {
            $('html, body').animate({scrollTop: 0}, 500,
                function () {
                    mouseleave(button);
                }
            );
        });

        // 鼠标离开动画
        function mouseleave(b) {
            $(b).stop().animate({
                backgroundColor: '#1e293b',
                scale: '(1)',
                opacity: 0.5,
            }, 150);
        }
    });
</script>
</body>
</html>
